<template>
<el-card>
    <el-form
    :model="addData"
    :rules="rules"
    ref="addForm"
    label-width="100px"
    class="demo-ruleForm">
    <el-form-item label="类型" prop="type">
        <el-radio-group v-model="addData.type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="上级" prop="pid" v-if="addData.type==2">
        <el-select v-model="addData.pid" placeholder="请选择">
            <el-option label="请选择" :value="0"></el-option>
            <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id"></el-option>

        </el-select>
    </el-form-item>
    <el-form-item label="名称" prop="title">
        <el-input v-model="addData.title" placeholder='请输入名称'></el-input>
    </el-form-item>
    <el-form-item label="图标" prop="icon" v-if="addData.type===1">
        <el-input v-model="addData.icon" placeholder="请输入图标"></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="url" v-if="addData.type==2">
        <el-input v-model="addData.url" placeholder="请输入地址"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="status">
        <el-radio-group v-model="addData.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('addForm')">提交</el-button>
        <el-button @click="resetForm('addForm')">重置</el-button>
    </el-form-item>
        
    </el-form>
</el-card>
  
</template>

<script>
import {getMenuList,getMenuById} from '../../request/menu'
export default {
    data(){
        return{
            menuList:[],
            addData:{
                id:'',
                pid:0,
                type:2,
                title:'',
                icon:'',
                url:"",
                status:1



            },
            rules:{
                pid:{required:true,message:'请选择'},
                type:{required:true,message:'请选择'},
                title:{required:true,message:'请输入'},
                icon:{requirded:true,message:'请输入'},
                url:{required:true,message:'请输入'},
                status:{required:true,message:"请选择"}

            }
        }
    
    },
    created(){
        this.id=this.$route.params.id
        getMenuList().then(res=>{
            if(res){
                this.menuList=res
            }
        })
        getMenuById(this.id).then(res=>{
            if(res){
                this.addData=res
            }
        })
    },
    methods:{
        submitForm(formName){
            this.$refs[formName].validate(valid=>{
                if(valid){
                    this.$http.post('/api/menuedit',{...this.addData,id:this.$route.params.id}).then(res=>{
                        if(res.code==200){
                            this.$success(res.msg)
                            this.$router.push('/menu')
                        }else{
                            this.$error(res.msg)
                        }
                    })
                }else{
                    return false
                }
            })
        },
        resetForm(formName){
            this.$refs[formName].resetFields()
        }
    }

}
</script>

<style lang='less' scoped>
.el-form{
    width: 600px;
    margin: 0 auto;
}

</style>